import React, { useEffect, useState } from 'react';
import { Card, Form } from 'react-bootstrap';

function AnnouncementSettings({ config, setConfig }) {
  // 组件内部默认配置
  const defaultAnnouncementConfig = {
    serverMessage: '欢迎加入服务器！',
    serverMessageDuration: 10,
    serverMessageInterval: 15,
    displayServerName: true,
    displayPlayerCount: true
  };

  // 组件内部状态，用于表单输入临时存储
  const [localConfig, setLocalConfig] = useState(defaultAnnouncementConfig);

  // 当外部config变化时，更新内部localConfig
  useEffect(() => {
    const mergedConfig = {
      ...defaultAnnouncementConfig,
      ...config
    };
    setLocalConfig(mergedConfig);
  }, [config]);

  // 处理配置变更，同时更新本地状态和全局配置
  const handleConfigChange = (key, value) => {
    const updatedLocalConfig = {
      ...localConfig,
      [key]: value
    };
    setLocalConfig(updatedLocalConfig);
    
    setConfig({
      ...config,
      [key]: value
    });
  };

  return (
    <Card className="h-100 border-3 shadow-medium" style={{backgroundColor: 'rgba(26, 26, 26, 0.6)', backdropFilter: 'blur(15px)', borderColor: '#1976d2', boxShadow: '0 0 20px rgba(25, 118, 210, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(25, 118, 210, 0.2)'}}>
      <Card.Header style={{backgroundColor: 'rgba(40, 40, 40, 0.7)', backdropFilter: 'blur(15px)'}}>
        <h3 style={{color: 'var(--primary-color)'}}>公告设置</h3>
      </Card.Header>
      <Card.Body style={{color: '#ffffff', maxHeight: '70vh', overflowY: 'auto'}}>
        <Form.Group className="mb-3">
          <Form.Label>服务器公告</Form.Label>
          <Form.Control 
            as="textarea" 
            rows={5} 
            value={localConfig.serverMessage}
            onChange={(e) => handleConfigChange('serverMessage', e.target.value)} 
            className="glass-input"
            style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}} 
          />
          <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
            设置服务器公告内容，会在玩家加入时显示
          </Form.Text>
        </Form.Group>
        
        <div className="row">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>公告显示时间（秒）</Form.Label>
              <Form.Control 
                type="number" 
                min="1" 
                max="300" 
                value={localConfig.serverMessageDuration}
                onChange={(e) => handleConfigChange('serverMessageDuration', parseInt(e.target.value) || 10)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}} 
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                公告在屏幕上显示的时间（秒）
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>公告刷新间隔（分钟）</Form.Label>
              <Form.Control 
                type="number" 
                min="0" 
                max="1440" 
                value={localConfig.serverMessageInterval}
                onChange={(e) => handleConfigChange('serverMessageInterval', parseInt(e.target.value) || 15)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}} 
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                公告重复显示的间隔时间（分钟），设为0则只在玩家加入时显示一次
              </Form.Text>
            </Form.Group>
          </div>
        </div>
        
        <Form.Group className="mb-3">
          <Form.Label>显示服务器名称</Form.Label>
          <Form.Check 
            type="switch" 
            checked={localConfig.displayServerName}
            onChange={(e) => handleConfigChange('displayServerName', e.target.checked)} 
            style={{color: '#ffffff'}} 
          />
          <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
            是否在游戏界面上显示服务器名称
          </Form.Text>
        </Form.Group>
        
        <Form.Group className="mb-3">
          <Form.Label>显示玩家数量</Form.Label>
          <Form.Check 
            type="switch" 
            checked={localConfig.displayPlayerCount}
            onChange={(e) => handleConfigChange('displayPlayerCount', e.target.checked)} 
            style={{color: '#ffffff'}} 
          />
          <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
            是否在游戏界面上显示当前玩家数量
          </Form.Text>
        </Form.Group>
      </Card.Body>
    </Card>
  );
}

export default AnnouncementSettings;